<template>
  <q-page>
    <div class="q-pa-md">
      <!-- 无数据 -->
      <transition appear enter-active-class="animated bounceInDown slower">
        <NothingHere v-if="!entriesStore.entriesList.length" />
      </transition>
      <q-list class="entries" v-if="entriesStore.entriesList.length">
        <!-- 条目 -->
        <Sortable
          :list="entriesStore.entriesList"
          :options="{ handle: '.handle-sort' }"
          @end="entriesStore.sortEnd"
          item-key="id"
        >
          <template #item="{ element, index }">
            <Entry :key="element.id" :entry="element" :index="index" />
          </template>
        </Sortable>
      </q-list>
    </div>
    <q-footer :class="$q.dark ? 'bg-dark' : 'bg-white'">
      <!-- 统计 -->
      <Total v-if="entriesStore.entriesList.length" />
      <!-- 添加表单 -->
      <AddEntry />
    </q-footer>
  </q-page>
</template>

<script setup lang="ts">
import { useEntriesStore } from "src/stores/storeEntries";
import Entry from "src/components/Entries/Entry.vue";
import Total from "components/Entries/Total.vue";
import AddEntry from "components/Entries/AddEntry.vue";
import NothingHere from "src/components/Entries/NothingHere.vue";
import { Sortable } from "sortablejs-vue3";

const entriesStore = useEntriesStore();
</script>
